/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View} from 'react-native';

// project
import {
    Svg, Text,  ItemY, Footer, ButtonOpacity, ButtonLight, TouchOpacity, TouchLight
} from '../../../library'
import {Icon} from '../../../preset';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class FooterMain extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
        super(props);

        /**
         * state
         */
        this.state = {

        };
    }

    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {
        
        // 制作样式
        const footerProps = {x:'around', h:'50', bg:'#fff', bt:'1 #ddd', y:'center'};
        const touchProps = {f: 1, action: 0.6};
        const itemProps = {x: 'center'};
        const svgProps = {w: 19, h: 19};
        const textProps = {size: 11, mt: 5};

        // color
        const current = this.props.current;
        const colorNormal = '#555';
        const colorFocus = 'green';
        const homeColor = current == 'Home' ? colorFocus : colorNormal;
        const smartColor = current == 'Smart' ? colorFocus : colorNormal;
        const userColor = current == 'User' ? colorFocus : colorNormal;

        // 渲染
		return (
			<Footer {...footerProps}>
                <TouchOpacity {...touchProps} onPress={(e)=> {
                    if (current == 'Home') return;
                    this.props.nav.navigate('Home');
                }}>
                    <ItemY x='center'>
                        <Svg icon={Icon.air} color={homeColor} {...svgProps} />
                        <Text color={homeColor} {...textProps}>首页</Text>
                    </ItemY>
                </TouchOpacity>
                <TouchOpacity {...touchProps} onPress={(e)=> {
                    if (current == 'Smart') return;
                    this.props.nav.navigate('Smart');
                }}>
                    <ItemY x='center'>
                        <Svg icon={Icon.air} color={smartColor} {...svgProps} />
                        <Text color={smartColor} {...textProps}>智能</Text>
                    </ItemY>
                </TouchOpacity>
                <TouchOpacity {...touchProps} onPress={(e)=> {
                    if (current == 'User') return;
                    this.props.nav.navigate('User');
                }}>
                    <ItemY x='center'>
                        <Svg icon={Icon.air} color={userColor} {...svgProps} />
                        <Text color={userColor} {...textProps}>我的</Text>
                    </ItemY>
                </TouchOpacity>
            </Footer>
		);
	}
}
